import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
import { storage } from '@/utils/storage'

export const useThemeStore = defineStore('theme', () => {
  // 当前主题：'light' 或 'dark'
  const currentTheme = ref(storage.get('theme', 'light'))
  
  // 是否为深色模式
  const isDark = computed(() => currentTheme.value === 'dark')
  
  // 切换主题
  function toggleTheme() {
    currentTheme.value = isDark.value ? 'light' : 'dark'
  }
  
  // 设置主题
  function setTheme(theme) {
    currentTheme.value = theme
  }
  
  // 监听主题变化，更新 DOM 和存储
  watch(currentTheme, (newTheme) => {
    document.documentElement.setAttribute('data-theme', newTheme)
    storage.set('theme', newTheme)
  }, { immediate: true })
  
  return {
    currentTheme,
    isDark,
    toggleTheme,
    setTheme
  }
})

